import api from "../../api";
import "./index.css";
import * as echarts from "echarts";
import router from "../../router";
export default {
  template: `
        <div class = 'chinaPage wh-100'>
            <div class = 'chinamap flex-1 mapborder'></div>
            <div class= 'chinamap-title'>中国地图</div>
            <div class = 'hgmap flex-1 mapborder'></div>
            <div class = 'hgmap-title'>香港地图</div>

        </div>
    `,


    // -----------------全局属性---------------------
    echartsInstanceHKMap: null, // 香港地图
    echartsInstanceChinaMap: null, // 中国地图
    // -----------------全局属性---------------------

    // 初始化香港地图
    async drawHKMap() {
        // window.loading(true, '.chinamap')
        try {
            const geoJson = await api.jsonServer.getHkMap()
            console.log('122123',geoJson);
            const chartDom = document.querySelector(
              ".chinaPage .hgmap"
            );
            this.echartsInstanceHKMap = echarts.init(chartDom);
            const option = {
              tooltip: {
                trigger: "item",
                formatter: "{b}<br/>{c} (p / km2)",
              },
              toolbox: {
                feature: {
                  // 将 chart 保存为 图片
                  saveAsImage: {},
      
                  // 复原
                  restore: {},
      
                  // 显示 数据
                  dataView: {},
                },
              },
              visualMap: {
                show: false,
                min: 800,
                max: 50000,
                text: ["High", "Low"],
                realtime: false,
                calculable: true,
                inRange: {
                  color: ["lightskyblue", "yellow", "orangered"],
                },
              },
              series: [
                {
                  name: "香港18区人口密度",
                  type: "map",
                  map: "HK", // 指定 地图（'HK'）
                  label: {
                    show: true,
                  },
                  data: [
                    { name: "中西区", value: 20057.34 },
                    { name: "湾仔", value: 15477.48 },
                    { name: "东区", value: 31686.1 },
                    { name: "南区", value: 6992.6 },
                    { name: "油尖旺", value: 44045.49 },
                    { name: "深水埗", value: 40689.64 },
                    { name: "九龙城", value: 37659.78 },
                    { name: "黄大仙", value: 45180.97 },
                    { name: "观塘", value: 55204.26 },
                    { name: "葵青", value: 21900.9 },
                    { name: "荃湾", value: 4918.26 },
                    { name: "屯门", value: 5881.84 },
                    { name: "元朗", value: 4178.01 },
                    { name: "北区", value: 2227.92 },
                    { name: "大埔", value: 2180.98 },
                    { name: "沙田", value: 9172.94 },
                    { name: "西贡", value: 3368 },
                    { name: "离岛", value: 806.98 },
                  ],
                  roam:true,
                  // 自定义名称映射
                  // 将 geoJson 的英文名字，映射成 对应的 中文名字
                  nameMap: {
                    "Central and Western": "中西区",
                    Eastern: "东区",
                    Islands: "离岛",
                    "Kowloon City": "九龙城",
                    "Kwai Tsing": "葵青",
                    "Kwun Tong": "观塘",
                    North: "北区",
                    "Sai Kung": "西贡",
                    "Sha Tin": "沙田",
                    "Sham Shui Po": "深水埗",
                    Southern: "南区",
                    "Tai Po": "大埔",
                    "Tsuen Wan": "荃湾",
                    "Tuen Mun": "屯门",
                    "Wan Chai": "湾仔",
                    "Wong Tai Sin": "黄大仙",
                    "Yau Tsim Mong": "油尖旺",
                    "Yuen Long": "元朗",
                  },
                },
              ],
            };
        
            // 获取到 geoJson 数据后，在 页面 注册（绘制） 底图
            echarts.registerMap("HK", geoJson);
        
            this.echartsInstanceHKMap.setOption(option);
        
            console.log(geoJson);
        }catch(err) {
            alert('香港地图接口报错')
        }finally {
            // window.loading(false, '.chinamap')
        }
      },

       // 初始化中国地图
  async drawChinaMap() {
    // window.loading(true, ".homepage-body-middle-top");
    try {
      const geoJson = await api.jsonServer.getChinaMap();
      const chartDom = document.querySelector(".chinamap");
      this.echartsInstanceChinaMap = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "中国境内省级的人口密度 <br/> {b}<br/>{c} (p / km2)",
        },
        toolbox: {
          feature: {
            // 将 chart 保存为 图片
            saveAsImage: {},

            // 复原
            restore: {},

            // 显示 数据
            dataView: {},
          },
        },
        visualMap: {
          show: false,
          min: 0,
          max: 100,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["#ccc", "#39e"],
          },
        },
        series: [
          {
            name: "中国全境的人口密码",
            type: "map",
            map: "china", // 指定 地图（'china'）
            label: {
              show: true,
            },
            roam: true,
            data: [
              {
                name: "北京",
                value: 76,
              },
              {
                name: "天津",
                value: 43,
              },
              {
                name: "河北",
                value: 92,
              },
              {
                name: "山西",
                value: 18,
              },
              {
                name: "内蒙古",
                value: 62,
              },
              {
                name: "辽宁",
                value: 85,
              },
              {
                name: "吉林",
                value: 37,
              },
              {
                name: "黑龙江",
                value: 54,
              },
              {
                name: "上海",
                value: 71,
              },
              {
                name: "江苏",
                value: 89,
              },
              {
                name: "浙江",
                value: 12,
              },
              {
                name: "安徽",
                value: 66,
              },
              {
                name: "福建",
                value: 29,
              },
              {
                name: "江西",
                value: 96,
              },
              {
                name: "山东",
                value: 78,
              },
              {
                name: "河南",
                value: 50,
              },
              {
                name: "湖北",
                value: 88,
              },
              {
                name: "湖南",
                value: 34,
              },
              {
                name: "广东",
                value: 67,
              },
              {
                name: "广西",
                value: 23,
              },
              {
                name: "海南",
                value: 59,
              },
              {
                name: "重庆",
                value: 82,
              },
              {
                name: "四川",
                value: 47,
              },
              {
                name: "贵州",
                value: 74,
              },
              {
                name: "云南",
                value: 40,
              },
              {
                name: "西藏",
                value: 95,
              },
              {
                name: "陕西",
                value: 21,
              },
              {
                name: "甘肃",
                value: 87,
              },
              {
                name: "青海",
                value: 33,
              },
              {
                name: "宁夏",
                value: 56,
              },
              {
                name: "新疆",
                value: 80,
              },
              {
                name: "台湾",
                value: 64,
              },
              {
                name: "香港",
                value: 31,
              },
              {
                name: "澳门",
                value: 69,
              },
            ],
          },
        ],
      };

      // 获取到 geoJson 数据后，在 页面 注册（绘制） 底图
      echarts.registerMap("china", geoJson);

      this.echartsInstanceChinaMap.setOption(option);
    } catch (err) {
      alert("请求中国地图数据失败！");
    } finally {
    //   window.loading(false, ".homepage-body-middle-top");
    }
  },


  mounted() {
    // 绘制香港地图
    this.drawHKMap();
   this.drawChinaMap()
  

  },
  destroyed() {
    // 组件销毁时，释放 香港图 占用的 内存
    this.echartsInstanceHKMap.dispose()
    this.echartsInstanceChinaMap.dispose()
  }
};
